<template>
  <view class="travel" :style="{backgroundImage:`url(${img})` ,backgroundSize:'contain',}">
    <view class="x"></view>
    <!-- 上边的主页 -->
    <view class="travel-top">
      <!-- 图片 -->
      <!-- <image :src="img" class="img"></image> -->
      <!-- 最上边的两个小图标 -->
      <view class="icons">
        <view class="tools">
           <uni-icons type="paperplane-filled" size="25" color="white"></uni-icons>
           <text>我的路线</text>
        </view>
        <view class="tools">
           <uni-icons type="more-filled" size="25" color="white"></uni-icons>
           <text>更多</text>
        </view>
      </view>
      <!-- 我的行程 -->
      <text  class="my-text">我的行程</text>
    </view>
    <!-- 下边的主页 -->
    <view class="travel-bottom">
      <!-- 标题 -->
      <view class="travel-bottom-title">
        <text class="weight">开始搜索美丽的世界</text>
        <text class="ignore" v-show="userInfo==null">您没有待出发的行程，可在此计划并管理旅程</text>
        <text v-show="userInfo!=null">祝您旅程愉快</text>
      </view>
      <view class="travel-icons">
        <block v-for="(icon,i) in icons" :key="i">
        <view class="icon">
          <uni-icons custom-prefix="iconfont" :type="icon.iconName" size="30" color="#1296db"></uni-icons>
          <text>{{icon.text}}</text>
        </view>
        </block>
      </view>
      <view class="teavel-nav">
        <block  v-for="(nav,i) in navs" :key="i">
          <view class="y" @click="changeIndex(i)">
            <navigator :style="index==i?'color:#1296db':''" url="#">{{nav}}</navigator>
            <view v-if="index==i" class="yy"></view>
          </view>
        </block>
      </view>
      <!-- 精选 -->
      <view class="travel-selected">
        <block v-for="(item,i) in selected" :key="i">
            <my-selected :selected="item"></my-selected>
        </block>
      </view>
    </view>
  </view> 
</template>

<script>
  import {mapState} from 'vuex'
  import tabbarBadge from '@/mixins/tabbar-badge.js'
  export default {
    mixins:[tabbarBadge],
    data() {
      return {
        index:0,
        img: 'https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1310/20/c27/27747809_1382272100575.jpg',
        icons: [{
          iconName: 'icon-luxian1',
          text: '创建旅行路线'
        },
        {
          iconName: 'icon-jingqu1',
          text: '关注景点'
        },
        {
          iconName: 'icon-luxian',
          text: '关注路线'
        }
        ],
        navs:['精选','露营','亲自游玩','定制游'],
        selected:[
          {
            img: 'https://img2.baidu.com/it/u=3887109100,4135963046&fm=253&fmt=auto&app=120&f=PNG',
            text: '西安寒冬里的一把火，着也太成都味了吧~',
            avator:'https://img0.baidu.com/it/u=3986927168,4079101108&fm=253&fmt=auto&app=138&f=JPEG',
            nickName:'街头横店行者',
            see: 144
          },
          {
            img: 'https://img1.baidu.com/it/u=775318165,2062333802&fm=253&fmt=auto&app=138&f=JPEG',
            text: '陕西秦岭下雪啦坐上7元的小火车去打卡~',
            avator:'https://img0.baidu.com/it/u=83845153,2540673127&fm=253&fmt=auto&app=138&f=JPEG',
            nickName:'街头横店行者',
            see: 220
          },
          {
            img: 'https://img0.baidu.com/it/u=590290663,2021626326&fm=253&fmt=auto&app=138&f=JPEG',
            text: '最美的黄昏~',
            avator:'https://img2.baidu.com/it/u=1236113013,780153296&fm=253&fmt=auto&app=138&f=JPEG',
            nickName:'街头横店行者',
            see: 220
          }
        ]
      };
    },
    computed: {
      ...mapState('m_user',['userInfo'])
    },
    methods : {
      changeIndex(i){
        this.index = i
        console.log(this.userInfo)
      }
    }
  }
</script>

<style lang="scss">
@import "@/static/iconfont.css";
.travel {
  .x {
    height: 100rpx;
  }
  .travel-top{
    height: 390rpx;
    position: relative;
    .my-text {
      position: absolute;
      left: 10px;
      bottom: 0;
      font-size: 20px;
      font-weight: bold;
      color: white;
      display: block;
      margin-bottom: 20rpx;
    }
    .icons {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 10px;
      display: flex;
      text-align: center;
      color: white;
      .tools {
        display: flex;
        flex-direction: column;
        padding: 10rpx 10rpx;
      }
    }
  } 
  .travel-bottom {
    border-start-start-radius: 10px;
    border-start-end-radius: 10px;
    padding: 0 10px;
    background-color: #efefef;
    .travel-bottom-title {
      display: flex;
      flex-direction: column;
      text-align: center;
      .weight{
        display: block;
        margin: 10px 0;
        font-size: 20px;
        font-weight: bold;
        color: deeppink;
      }
      .ignore {
        font-size: 12px;
      }
    }
    .travel-icons {
      margin: 40rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .icon {
        display: flex;
        flex-direction: column;
        font-size: 12px;
        text-align: center;
        text {
          display: block;
          margin-top: 10rpx;
        }
      }
    }
    .teavel-nav {
      display: flex;
      justify-content: space-around;
      .y {
        display: flex;
        flex-direction: column;
        .yy {
          margin-top: 4rpx;
          width: 100%;
          height: 1px;
          background-color:#1296db ;
        }
      }
    }
    .travel-selected {
      margin: 0 20rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap:wrap;
    }
  }
  
}
</style>
